<template>
    <div class="singerDetails">
        <!-- 我喜欢 -->
        <div class="top">
            <img :src="singer.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'" alt="">
            <div class="history-play-list-title">
                <div>{{ singer.name }}</div>
                <div class="user">
                    <span>{{ singer.concern }} 关注</span>
                    <span>{{ formatNumber(singer.fans) }}粉丝</span>
                </div>
                <button>关注</button>
                <div class="briefDesc">{{ singer.briefDesc }}</div>
            </div>
        </div>
        <div class="total">
            <p>热门歌曲</p>
            <button @click="() => playList = singer.list">播放全部 {{ singer.total }}</button>
        </div>
        <!-- 歌曲列表 -->
        <MusicList :data="singer.list" />
        <!-- 查看所有单曲 -->
        <p class="seeAllSingles" @click="() => router.push({ path: '/singer/allSongs', query: { id: route.query.id } })">
            查看所有单曲</p>
        <div class="topAlbums">
            <p>热门专辑</p>
            <div class="content">
                <div class="item" v-for="(item) in singer.albumList" :key="item.id">
                    <img v-lazys="item.picUrl">
                    <div>
                        <p @click="(event) => goAblum(event, item.id)">
                            <span>{{ item.name }}</span>
                        </p>
                        <p>{{ getTimestampConversion(item.publishTime) }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 加载中 -->
        <div style="position: absolute;top: 50vh;width: 100%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MusicList from '@/components/musicList.vue';
import useCounterStore from '@/stores/counter'
import { getSingerSongs, getFollowCount, getArtistAlbum, getArtistDesc } from '@/api/singer/index'

interface singerType {
    list: Array<any>,
    albumList: Array<any>,
    total: number,
    picUrl: string,
    name: string,
    fans: number,
    concern: number,
    briefDesc:string
}

const route = useRoute()
const router = useRouter()
const { playList } = toRefs(useCounterStore())
const { getTimestampConversion, formatNumber } = useCounterStore()
// 获取路由参数id
const id = route.query.id
// 定义一个loading变量
const loading = ref(true)
const singer = reactive<singerType>({
    list: [],
    albumList: [],
    total: 0,
    picUrl: '',
    name: '',
    fans: 0,
    concern: 40,
    briefDesc:''
})

onMounted(() => {
    getSongs(Number(id))
})

// 函数goAblum，用于跳转到指定专辑
function goAblum(event: any, id: number) {
    event.stopPropagation()//阻止冒泡
    router.push({ path: '/songs/allAlbums', query: { id } })
}

// 用于获取歌手信息
async function getSongs(id: number) {
    // 获取歌手粉丝数、热门歌曲、热门专辑
    const [a1, a2, a3, a4] = await Promise.all([getFollowCount({ id }), getSingerSongs({ id }), getArtistAlbum({ id }), getArtistDesc({ id })])
    // 判断粉丝数是否获取成功
    console.log(a4);
    
    if (a1.data.code === 200) {
        singer.fans = a1.data.data.fansCnt
    }
    // 判断热门歌曲是否获取成功
    if (a2.data.code === 200) {
        singer.list = a2.data.hotSongs.slice(0, 5)
        singer.name = a2.data.artist.name
        singer.picUrl = a2.data.artist.picUrl
        singer.total = a2.data.artist.musicSize
        loading.value = false
    }
    // 判断热门专辑是否获取成功
    if (a3.data.code === 200) {
        singer.albumList = a3.data.hotAlbums
    }
    if(a4.data.code === 200){
        singer.briefDesc = a4.data.briefDesc
    }
}
// 监听路由变化
watch(route, () => {
    getSongs(Number(route.query.id))
})

</script>

<style lang="scss" scoped>
.singerDetails {
    width: 100%;
    height: 87%;
    color: aliceblue;
    overflow: auto;
    margin-top: 8%;
    position: relative;

    .top {
        display: flex;
        color: rgb(182, 198, 212);
        position: relative;
        padding: 0 3vw;
        font-size: 2vw;
        padding-bottom: 2vw;

        >img {
            width: 14vw;
            height: 14vw;
            border-radius: 10px;
            margin-right: 2vw;

        }
    }

    .seeAllSingles {
        width: fit-content;
        color: #ccc;
        margin-left: 2vw;
        margin-top: 1vw;
        font-size: 12px;
        cursor: pointer;
    }
}

.singerDetails::-webkit-scrollbar {
    display: none;
}

.history-play-list-title {
    position: relative;
    >div {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
    }

    >button {
        position: absolute;
        bottom: 4vh;
        border: 0;
        border-radius: 6px;
        padding: 6px 26px;
        font-size: 10px;
        color: #000;
        font-weight: 700;
        cursor: pointer;
    }
    .briefDesc{
        width: 60vw;
        position: absolute;
        bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
    }
}

.user {
    margin-top: 10px;
    display: flex;
    align-items: center;

    >span {
        margin-left: 0.4vw;
        font-size: 10px;
        font-weight: 100;
    }
}

.total {
    height: 4vh;
    display: flex;
    align-items: center;
    margin-left: 2vw;
    margin-bottom: 2vw;

    button {
        border: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        padding: 4px 10px;
        margin-left: 2vw;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
    }
}

.topAlbums {
    width: 100%;
    padding: 2vw;
    box-sizing: border-box;

    .content {
        display: flex;
        flex-wrap: wrap;


        img {
            width: 13vw;
            height: 13vw;
            border-radius: 4px;
        }

        .item {
            margin-right: 2vw;
            margin-top: 2vw;

            div {
                width: 13vw;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px
            }

            p:nth-child(1) {
                cursor: pointer;

                span:hover {
                    border-bottom: 1px solid #fff;
                }
            }

            p:nth-child(2) {
                color: #ccc;
                font-size: 10px;
                margin-top: 2px;
            }
        }
    }
}

.like::-webkit-scrollbar {
    display: none;
}
</style>